import React from 'react'
import '../../styles/myJump/music.css'
import mcImg from '../images/1.jpg'
import axios from 'axios'
import Axios from 'axios';
axios.default.widthCredentials = true


class Music extends React.Component {
    constructor() {
        super()
        this.state = {
            data: []
        }
    }

    async componentDidMount() {
        let uid = localStorage.getItem('token')
        await Axios.get('http://localhost:4000/user/playlist?uid=' + uid)
            .then(res => {
                // console.log(res)
                this.setState({
                    data: res.data.playlist
                })
            })
    }

    render() {
        let { data } = this.state
        // console.log(data)
        return (
            <div className='my-jump-music'>
                <div>
                    <p className='my-jump-title'>歌单</p>
                    <ul>
                        <li className='clearfix'>
                            <div className='my-muc-img'>
                                <img src={mcImg} alt="" />
                            </div>
                            <div className='my-muc-title'>
                                <p>我的听歌排行</p>
                                <span>累计听歌11首</span>
                            </div>
                        </li>
                        {data.map((item, i) => {
                            // console.log(item, i)
                            if (i === 0) {
                                return (
                                    <li className='clearfix' key={i}>
                                        <div className='my-muc-img'>
                                            <img src={item.coverImgUrl} alt="" />
                                        </div>
                                        <div className='my-muc-title'>
                                            <p>{item.name}</p>
                                            <span>累计听歌{item.trackCount}首</span>
                                        </div>
                                    </li>
                                )
                            }
                        })}
                    </ul>
                </div>
                <div>
                    <p className='my-jump-title'>收藏的歌单</p>
                    <ul>
                        {data.map((item, i) => {
                            if (i > 0) {
                                return (
                                    <li className='clearfix' key={i}>
                                        <div className='my-muc-img'>
                                            <img src={item.coverImgUrl} alt="" />
                                        </div>
                                        <div className='my-muc-title'>
                                            <p>{item.name}</p>
                                            <span>累计听歌{item.trackCount}首</span>
                                        </div>
                                    </li>
                                )
                            }
                        })}
                    </ul>
                </div>
            </div>
        )
    }
}

export default Music